<template>
  <div id="columetgtManager">
    <v-header title="指标关系定义" :showDownloadBtn="false" :saveShow="false"></v-header>
    <el-container class="container-box">
      <el-header class="header-tool-bar" height="50px">
        <!--工具栏-->
        <el-row>
          <el-button type="primary" size="mini" @click="adddialogForm">增加</el-button>
          <el-button type="primary" size="mini" @click.stop="removedata">删除</el-button>
          <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
          <el-button type="primary" size="mini" @click="showTabeData">刷新</el-button>
          <span class="conditionquery">
          <el-input v-model="condition" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                    clearable></el-input>
          <el-button type="primary" size="mini" @click="conditionquery">查询</el-button>
        </span>
        </el-row>
      </el-header>
      <el-main class="main-table-box">
        <!--表格-->
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="tableLoading"
          @select="checkrow">
          <el-table-column
            type="selection"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="meta_id"
            label="元数据代码"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="colume_meta_id"
            label="属性要素元代码"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="tgt_meta_id"
            label="指标元代码"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="busi_desc"
            label="业务描述"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="tech_desc"
            label="技术描述"
            width="auto">
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </el-main>
    </el-container>

    <!--新增/编辑-弹框-->
    <el-dialog :title="addRoleDialogMode == 'ADD' ? '新增数据' : '编辑数据'"
               :visible.sync="addRoleDialogVisiable"
               v-model="addRoleDialogMode"
               @close="cancel"
               width="900px">
      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="140px" class="demo-dialogForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="元数据代码" prop="meta_id">
              <el-input v-model="dialogForm.meta_id" :disabled="editmetadisa"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="属性要素元代码" prop="colume_meta_id">
              <el-input v-model="dialogForm.colume_meta_id" :disabled="editmetadisa"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="技术描述" prop="tech_desc">
              <el-input v-model="dialogForm.tech_desc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务描述" prop="busi_desc">
              <el-input v-model="dialogForm.busi_desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="指标元代码" prop="tgt_meta_id">
              <el-input v-model="dialogForm.tgt_meta_id" :disabled="editmetadisa"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialogbtn">
          <el-button type="primary" @click="submitForm('dialogForm')">确定</el-button>
          <el-button @click="cancel">关闭</el-button>
          <el-button @click="resetForm('dialogForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--删除元事件弹框-->
  </div>
</template>
<script>
  import '../../../../assets/css/mixinParameterManager.styl'
  import { mixinParameterManager } from '../../../../assets/js/mixins'
  import ajax from '../../../../api/ajax/ajax'
  import {VHeader} from '../../../../components'
  import api from '../../../../api/url'
  import { numLetteValidator } from '../../../../assets/js/rules'
  export default {
    mixins: [mixinParameterManager],
    name: 'event-manage',
    components: {
      VHeader
    },
    data () {
      return {
        tableLoading: true, // 表格Loading
        checkbox: [], // 编辑判断是否只勾选一个
        multipleSelection: [], // 多选数组
        totalCount: 10, // 默认数据总数
        editmetadisa: false, // meta_id input框禁止修改
        addRoleDialogMode: 'ADD', // 对话框色对话框模式  ADD新增 MODIFY 修改
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        tableData: [], // 表格当前页数据
        list: [], // 删除临时存储数据
        condition: '', // 输入条件
        dialogForm: {}, // 弹窗表单
        rules: { // 弹窗校验规则
          meta_id: [
            {required: true, message: '请输入', trigger: 'blur'},
            { validator: numLetteValidator, trigger: 'blur' },
            { min: 1, max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          colume_meta_id: [
            {required: true, message: '请输入', trigger: 'blur'},
            { validator: numLetteValidator, trigger: 'blur' },
            { min: 1, max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          tgt_meta_id: [
            {required: true, message: '请输入', trigger: 'blur'},
            { min: 1, max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          busi_desc: [
            {required: true, message: '请输入', trigger: 'blur'},
            { min: 1, max: 500, message: '最多输入500个字符', trigger: 'blur' }
          ],
          tech_desc: [
            {required: true, message: '请输入', trigger: 'blur'},
            { min: 1, max: 500, message: '最多输入500个字符', trigger: 'blur' }
          ]
        },
        addRoleDialogVisiable: false,
        editdialogform: false,
        currentItem: {}
      }
    },
    methods: {
      // 封装查询数据
      packAjax (data) {
        ajax.post(api.SELECT_BAMETA_COLUMETGT_LIST_FORPAGE, data).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
        })
      },
      // 勾选框事件
      handleSelectionChange (val) {
        let checkedCount = val.length
        // 判断是不是全选
        if (checkedCount === this.tableData.length) {
          this.checkbox.length = checkedCount
        } else {
        }
        this.list = []
        for (let i = 0; i < val.length; i++) {
          let remdata = {
            meta_id: val[i].meta_id,
            colume_meta_id: val[i].colume_meta_id,
            tgt_meta_id: val[i].tgt_meta_id
          }
          this.list.push(remdata)
        }
      },
      // 新增/修改 元事件
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const insertdata = {
              meta_id: this.dialogForm.meta_id,
              colume_meta_id: this.dialogForm.colume_meta_id,
              tgt_meta_id: this.dialogForm.tgt_meta_id,
              busi_desc: this.dialogForm.busi_desc,
              tech_desc: this.dialogForm.tech_desc
            }
            if (this.addRoleDialogMode === 'ADD') {
              // 新增接口
              ajax.post(api.INSERT_BAMETA_COLUMETGT, insertdata).then((res) => {
                this.showTabeData()
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                })
              })
            } else if (this.addRoleDialogMode === 'MODIFY') {
              // 修改接口
              ajax.post(api.UPDATE_BAMETA_COLUMETGT, insertdata).then((res) => {
                this.dialogForm = {}
                this.showTabeData()
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
              })
            }
            this.checkbox = []
            this.addRoleDialogVisiable = false
            this.$refs.dialogForm.clearValidate()
          } else {
            return false
          }
        })
      },
      // 删除数据
      removedata () {
        if (this.checkbox.length > 0) {
          this.$confirm('是否删除所选记录', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let remdata = {
              key_list: this.list
            }
            ajax.post(api.DELETE_BAMETA_COLUMETGT, remdata).then((res) => {
              this.showTabeData()
              this.checkbox = []
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
          })
        } else {
          this.$message.error('请至少选择一条记录进行删除')
        }
      }
    }
  }
</script>
